<template>
	<view>
		<view class="list-title-view">{{title}}</view>
		<view class="list" :style="{gridTemplateColumns: `repeat(${lineNum},1fr)`}">
			
			<view v-for="(icon_item,index) in data" :key="index">
				<view class="item_box" :style="{opacity:showimg?'1':'0'}" >
					<image :src="icon_item.icon" ></image>
					<view v-if="icon_item.name">{{icon_item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 每行显示几个按钮
			 */
			lineNum: {
				type: Number,
				default: 4
			},
			/**
			 * 按钮数组
			 * [{icon:'按钮图片地址',name:'按钮标题文字/可不写'}]
			 */
			data: {
				type: Array,
				default: []
			},
			title:{
				type:String,
				dafault:'安全配置'
			}
		},
		data() {
			return {
				showimg: false,
			};
		},
		created() {
			// 解决图片不设置高度导致的页面跳动
			setTimeout(() => {
				this.showimg = true
			}, 700)
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.active {
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		border-width: 2rpx;
		background-color: indianred;
	}

	.list {
		display: grid;
	}

	.item {
		display: flex;
	}

	.item_box {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		transition: 0.2s;
		padding: 10rpx;
		
		image {
			margin-top: 10rpx;
			width: 70rpx;
			height: 70rpx;
			transition: 0.3s;
			border-radius: 50%;

			&:active {
				transform: scale(0.9);
				opacity: 0.7;
			}
		}

		view {
			color: #2B2F33;
			font-size: 28rpx;
			text-align: center;
			margin-top: 10rpx;
			word-break: break-all;
			width: auto;
			font-weight: bolder;
		}
	}
	
	.list-title-view{
		color: black;
		padding: 10rpx 20rpx ;
		background-color: #F5F5F5;
		margin-top: 30rpx;
	}
</style>